<script setup lang="ts">
/**
 * 配合hooks 的 useDialog 只用，效果极佳
 */
import { computed, Ref } from "vue";
interface Props {
  modelValue: boolean;
  id?: number;
  type: DialogType;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emits = defineEmits(["update:modelValue", "getList"]);

const dialogVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val: Ref<boolean> | boolean) {
    emits("update:modelValue", val);
  },
});
const title = computed(() => {
  return props.type === "edit" ? "修改" : props.type === "create" ? "新增" : "查看";
});
</script>

<template>
  <el-dialog
    :title="title"
    v-bind="$attrs"
    width="600px"
    :close-on-click-modal="type === 'view'"
    :disabled="type === 'view'"
    class="dialog-form"
    v-model="dialogVisible"
  >
    <div>
      <slot></slot>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
